<template>
  <div
    :class="prefixCls"
    class="loginbg relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
  >
    <div :class="`${prefixCls}__first`"></div>
    <div :class="`${prefixCls}__second`"></div>
    <div :class="`${prefixCls}__third`"></div>
    <div :class="`${prefixCls}__fourth`"></div>
    <div :class="`${prefixCls}__fifth`"></div>
    <div class="relative mx-auto h-full flex">
      <div :class="`${prefixCls}__centerContainer`" class="relative mx-auto h-full flex">
        <div :class="`${prefixCls}__left flex-1`">
          <!-- 左上角系统标题 -->
          <div
            class="relative flex flex-col justify-center mt-40px items-center text-#2091f6"
            style="letter-spacing: 2px"
          >
            <span class="text-30px font-bold">{{ wecomTitle }}</span>
            <!-- <span class="mt-10px text-20px">搜-拓-管-联一体的SCRM智能管理系统</span> -->
          </div>
          <div class="login-left-bg">
            <img src="@/assets/imgs/loginLeftBg.png" alt="" srcset="" />
          </div>
        </div>
        <div
          class="v-login-right relative flex-1 ml-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px"
        >
          <!-- 右上角的注册 -->
          <div
            class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
          >
            <span
              v-if="!getShowRegister"
              class="registerBtn"
              @click="setLoginState(LoginStateEnum.REGISTER)"
              >注册</span
            >
          </div>
          <!-- 右边的登录界面 -->
          <Transition appear enter-active-class="animate__animated animate__bounceInRight">
            <div
              class="m-auto w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
            >
              <!-- 账号登录 -->
              <LoginForm
                :agree="agree"
                class="m-auto h-full px-20px lt-xl:(rounded-3xl light:bg-white)"
              />
              <!-- 手机登录 -->
              <MobileForm
                :agree="agree"
                class="m-auto h-full px-20px lt-xl:(rounded-3xl light:bg-white)"
              />
              <!-- 注册 -->
              <RegisterForm
                :agree="agree"
                class="m-auto h-auto px-20px lt-xl:(rounded-3xl light:bg-white)"
              />
              <!-- 企业微信登录 -->
              <WeChatLogin
                :agree="agree"
                class="m-auto h-auto px-20px lt-xl:(rounded-3xl light:bg-white)"
              />
              <!-- 企业微信登录选择 -->
              <WeChatChoice
                :agree="agree"
                class="m-auto h-auto px-20px lt-xl:(rounded-3xl light:bg-white)"
              />
              <!-- 企业微信绑定已有用户 -->
              <BindNowUser
                :agree="agree"
                class="m-auto h-auto px-20px lt-xl:(rounded-3xl light:bg-white)"
              />
            </div>
          </Transition>
          <div class="flex items-center justify-center">
            <el-checkbox v-model="agree"></el-checkbox>
            同意
            <el-link type="primary" target="_blank" href="https://scrm.jzsaas.com/user-service.html"
              >《用户使用协议》</el-link
            >
            及
            <el-link type="primary" target="_blank" href="https://scrm.jzsaas.com/user-privacy.html"
              >《个人信息保护政策》</el-link
            >
          </div>
        </div>
      </div>
    </div>
    <div
      class="footer-text absolute w-full bottom-0 h-[var(--app-footer-height)] text-center leading-[var(--app-footer-height)] text-#fff"
    >
      <span class="text-14px">Copyright ©2024-{{ title }}</span>
      <a class="text-14px ml-10px text-white" href="https://beian.miit.gov.cn/"
        >冀ICP备2023033143号-1</a
      >
    </div>
  </div>
  <div class="apk-login">
    <AppUpdate />
  </div>
</template>
<script lang="ts" setup>
import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
import { weComLogin } from '@/api/wecom/user/index'
import { AppUpdate } from '@/layout/components/AppUpdate'
import * as authUtil from '@/utils/auth'
import * as LoginApi from '@/api/login'

import {
  LoginForm,
  MobileForm,
  RegisterForm,
  WeChatLogin,
  WeChatChoice,
  BindNowUser
} from './components'
import { LoginStateEnum, useFormValid, useLoginState } from './components/useLogin'
const { setLoginState, getLoginState, handleBackLogin } = useLoginState()
const getShowRegister = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)

defineOptions({ name: 'Login' })
const appStore = useAppStore()
const title = computed(() => appStore.getFooterText)
const wecomTitle = computed(() => appStore.getTitle)
const { t } = useI18n()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
const { query } = useRoute()

const agree = ref(true)

/**不同的域名获取不同的企业名称*/
const getTenantByWebsite = async () => {
  const website = location.host
  const res = await LoginApi.getTenantByWebsite(website)
  if (res) {
    appStore.setFooterText(res.name)
    if (res.productName) appStore.setTitle('欢迎使用' + res.productName)
    if (res.logo) appStore.setLogoUrl(res.logo)
  }
}

// code登录
const loginCrm = async (code) => {
  const res = await weComLogin(code)
  if (res) {
    authUtil.setTenantId(res.tenantId)
    authUtil.setTenantSign(res.sign)
    authUtil.setToken(res)
    if (!redirect.value) {
      redirect.value = '/'
    }
    push({ path: redirect.value || permissionStore.addRouters[0].path })
  } else {
    handleBackLogin()
  }
}
// 获取url的code
const getCodeFromUrl = (url) => {
  const regex = /[?&]code=([^&]*)/
  const match = url.match(regex)
  return match ? match[1] : null
}
/*判断是否为企微浏览器*/
const isWorkWechat = () => {
  if (navigator.userAgent.indexOf('MicroMessenger') != -1) {
    if (navigator.userAgent.indexOf('wxwork') != -1) {
      // 企业微信
      return true
    } else {
      // 微信
      return false
    }
  } else {
    // 非微信
    return false
  }
}
onMounted(() => {
  if ('type' in query && query.type == 'reg') {
    setLoginState(LoginStateEnum.REGISTER)
  }
  const weComCode = getCodeFromUrl(window.location.href)
  if (weComCode) {
    sessionStorage.setItem('weComCode', weComCode)
    loginCrm(weComCode)
  }
  getTenantByWebsite()
})
</script>

<style lang="scss" scoped>
.apk-login {
  position: fixed;
  top: 20px;
  right: 10px;
}
$prefix-cls: #{$namespace}-login;

.#{$prefix-cls} {
  overflow: hidden;
  background: #db748b;
  background: linear-gradient(to right, #db748b, #db748b, #db748b, #577dcf);
  &__centerContainer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 90%;
    background: #e3e4ef;
    border-radius: 20px;
    padding: 30px;
    box-sizing: border-box;
  }
  &__left {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(to bottom, #c3d9f1, #ced2f1);
  }
  .login-left-bg {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 400px;
    }
  }

  &__first {
    position: absolute;
    width: 0px;
    height: 0px;
    top: 22%;
    left: -4%;
    border-radius: 50%;
    box-shadow: 100px 2px 200px 300px #577dcf;
  }
  &__second {
    position: absolute;
    width: 888px;
    height: 888px;
    top: 31%;
    left: -8%;
    border-radius: 50%;
    background: radial-gradient(at left top, #50589390, #50589390, #50589300, #50589300);
  }
  &__third {
    position: absolute;
    width: 149px;
    height: 0px;
    top: 36%;
    left: 2%;
    border-radius: 50%;
    box-shadow: 0px 0px 100px 6px #505893;
  }
  &__fourth {
    position: absolute;
    width: 0px;
    height: 0px;
    top: 32%;
    left: 30%;
    border-radius: 50%;
    box-shadow: 100px 2px 200px 300px #505893;
  }
  &__fifth {
    position: absolute;
    width: 0px;
    height: 0px;
    bottom: 42%;
    left: 43%;
    border-radius: 50%;
    box-shadow: 100px 2px 200px 300px #505893;
  }
  .registerBtn {
    margin-left: 10px;
    color: var(--el-color-primary);
    cursor: pointer;
  }
  ::v-deep(.el-input__inner) {
    height: 46px;
  }
  ::v-deep(.el-button--large) {
    height: 46px;
  }
}

@media screen and (min-width: 375px) and (max-width: 1600px) {
  .v-login__left {
    display: none;
  }
  .v-login__centerContainer {
    padding: 4px;
    width: 96%;
    height: 90%;
  }
  .v-login-right {
    margin-left: 0;
  }
  .footer-text {
    display: none;
  }
  ::v-deep .el-form-item__content h2 {
    margin: 10px 0;
  }
  ::v-deep .el-form-item {
    margin-bottom: 20px;
  }
  ::v-deep .el-form--large.el-form--label-top .el-form-item .el-form-item__label {
    margin-bottom: 6px;
  }
}
</style>
